<template>
  <div class="container">
    <div class="top">
      <div class="title">News headlines</div>
      <div class="info">
        <span>Time:2020-04-29</span>
        <span>Aricicle Source:Home</span>
        <span>Views:1197</span>
      </div>
      <div class="label">
        <div class="before">Hot News</div>
        <div class="after"></div>
      </div>
    </div>
    <div class="content">
      <div class="img-box">
       <div class="overflow">
          <div class="mask">This is the description of the picture</div>
          <img src="@/assets/imgs/photoList/img7.jpg" alt="">
       </div>
      </div>
      <p>
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
        deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
        provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
        fuga. Et harum quidem rerum facilis est et expedita distinctio lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Ut non libero consectetur adipiscing elit magna. Sed et quam lacus. Fusce condimentum
        eleifend enim a feugiat. Pellentesque viverra vehicula sem ut volutpat. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus. Fusce condimentum eleifend enim
        a feugiat.
      </p>
      <p>
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
        deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
        provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
        fuga. Et harum quidem rerum facilis est et expedita distinctio lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Ut non libero consectetur adipiscing elit magna. Sed et quam lacus. Fusce condimentum
        eleifend enim a feugiat. Pellentesque viverra vehicula sem ut volutpat. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus. Fusce condimentum eleifend enim
        a feugiat.
      </p>
      <p>
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
        deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
        provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
        fuga. Et harum quidem rerum facilis est et expedita distinctio lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Ut non libero consectetur adipiscing elit magna. Sed et quam lacus. Fusce condimentum
        eleifend enim a feugiat. Pellentesque viverra vehicula sem ut volutpat. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus. Fusce condimentum eleifend enim
        a feugiat.
      </p>
    </div>
    <div class="bottom">
      <span>Editor: TOM</span>
      <span>Print:<span class="icon iconfont printer-fill">&#xe870;</span></span>
      <span>Close:<span class="icon iconfont close">&#xe7fc;</span></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PictureContent'
}
</script>

<style lang="scss" scoped>
.container {
  width: 912px;
  // height: 1200px;
  margin: 70px auto;
  padding: 40px;
  border-radius: 4px;
  border-top: 5px solid #72c02c;
  // background-color: pink;
  box-sizing: border-box;
  box-shadow: 2px 2px 8px #555;
  .top {
    width: 100%;
    height: 160px;
    position: relative;
    border-bottom: 1.5px dotted #e4e9f0;
    .title {
      width: 100%;
      height: 80px;
      padding-top: 20px;
      text-align: center;
      font-size: 28px;
      letter-spacing: 2px;
      color: #585f69;
    }
    .info {
      width: 100%;
      height: 60px;
      text-align: center;
      color: #555;
      font-size: 14px;
      letter-spacing: 1px;
      span {
        margin: 3px;
      }
    }
    .before {
      position: absolute;
      top: 70px;
      left: -50px;
      height: 45px;
      padding: 0 25px;
      background-color: #72c02c;
      line-height: 45px;
      font-size: 21px;
      color: #fff;
      text-align: center;
      z-index: 2;
    }
    .after {
      position: relative;
      top: -100px;
      left: -50px;
      width: 10px;
      height: 54px;
      background-color: #567f32;
      border-radius: 25px 0;
    }
  }
  .content {
    width: 100%;
    // height: 860px;
    padding: 30px 40px;
    box-sizing: border-box;
    border-bottom: 1.5px dotted #e4e9f0;
    // background-color: pink;
    .img-box {
      width: 100%;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      .overflow {
        position: relative;
        width: 500px;
        height: 300px;
        overflow: hidden;
        &:hover .mask{
          opacity: 1;
          font-size: 20px;
        }
        &:hover img{
          transform: scale(1.2) rotate(2deg);
        }
        .mask {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 10px;
          color: #555;
          padding: auto 20px;
          z-index: 99;
          background: rgba(248, 248, 248, 0.79);
          opacity: 0;
          transition: all .3s linear;
        }
        img {
          width: 500px;
          height: 300px;
          transition: all .5s linear;
        }
      }
    }
    p {
      font-size: 14px;
      color: #555;
      line-height: 28px;
      letter-spacing: 1px;
    }
  }
  .bottom {
    width: 100%;
    height: 60px;
    margin-top: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    // background-color: pink;
    span {
      margin: 15px;
      font-size: 15px;
      color: #555;
      line-height: 28px;
      letter-spacing: 1px;
      .icon {
        font-size: 19px;
        font-weight: 600;
        cursor: pointer;
      }
    }
  }
}
</style>
